<div class="col-md-12">
    <div class="row row-space">
        <div class="col-md-12 ">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <b> Auditing Filters</b>
                </div>

                <div class="panel-body">
                    <form name="form">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>User</label>
                                    <input type="text" class="form-control" name="user" [(ngModel)]="query.user">
                                </div>
                                
                                <div class="col-md-3">
                                    <label>Operation</label>
                                    <select class="form-control" name="operation" [(ngModel)]="query.operation">
                                        <option value="-2">--Select Operation--</option>
                                        <option value="3">Create</option>
                                        <option value="0">Read</option>
                                        <option value="1">Update</option>
                                        <option value="2">Delete</option>
                                        <option value="4">Command</option>
                                        <option value="5">Create class</option>
                                        <option value="6">Drop class</option>
                                        <option value="7">Config Changed</option>
                                        <option value="8">Node Joined</option>
                                        <option value="9">Node Left</option>
                                        <option value="10">Security Module</option>
                                        <option value="11">Security component reloaded</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label>Database </label>
                                    <select id="databasesOnline" name="db" [(ngModel)]="query.db" class="form-control"
                                        data-placeholder="Pick a Database">
                                        <option *ngFor="let db of databases" [value]="db"> {{db}}</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label>Record</label>
                                    <input type="text" class="form-control" name="record" [(ngModel)]="query.record">
                                </div>


                            </div>
                            <div class="row row-space">
                                <div class="col-md-3">
                                    <label>Date from</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control" name="fromDate" [(ngModel)]="query.fromDate">

                                        <span class="input-group-btn">
                                            <button class="btn btn-default">
                                                <i class="fa fa-calendar">
                                                </i>
                                            </button>
                                        </span>
                                    </div>

                                </div>
                                <div class="col-md-3">
                                    <label>Note</label>
                                    <input type="text" class="form-control" name="note" [(ngModel)]="query.note">
                                </div>
                                <div class="col-md-3">
                                    <label>Date To</label>


                                    <div class="input-group date">

                                        <input type="text" class="form-control" name="toDate" [(ngModel)]="query.toDate">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default">
                                                <i class="fa fa-calendar">
                                                </i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label>Limit</label>
                                    <input type="number" class="form-control" name="limit" [(ngModel)]="query.limit">
                                </div>
                                <div class="col-md-4 col-md-offset-8">
                                    <br />
                                    <div class="pull-right">
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-default" (click)="resetFilter()"><i class="fa fa-eraser">
                                                </i>
                                                Clear
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-default" (click)="searchLogs()"><i class="fa fa-search">
                                                </i>
                                                Search
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-space">
        <div class="col-md-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            User
                        </th>
                        <th>
                            UserType
                        </th>
                        <th>
                            Date
                        </th>
                        <th>
                            Operation
                        </th>
                        <th>
                            Database
                        </th>
                        <th>
                            Record
                        </th>
                        <th>
                            Note
                        </th>
                        <th>
                            Changes
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr *ngFor="let log of logs">
                        <td>
                            {{log.username}}
                        </td>
                        <td>
                            {{log.userType}}
                        </td>
                        <td>
                            {{log.date | date : 'medium'}}
                        </td>
                        <td>
                            {{log.operation | operation}}
                        </td>
                        <td>
                            {{log.database}}
                        </td>
                        <td>
                            {{log.record}}
                        </td>
                        <td>
                            {{log.note}}
                        </td>
                        <td>
                            {{log.changes}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>